import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入
import MyDiscover from '@/views/MyDiscover.vue'
import MyMine from '@/views/MyMine.vue'
import MyFriend from '@/views/MyFriend.vue'
import NotFound from '@/views/NotFound.vue'
import TuiJian from '@/views/TuiJian.vue'
import TopList from '@/views/TopList.vue'
import PlayList from '@/views/PlayList.vue'

Vue.use(VueRouter)

const routes = [
  // 当我在浏览器输入/a，就会自动跳转到/discover
  // { path: '/a', redirect: '/discover' },
  // 如果路径就写一个/或者空字符串都是代表路径什么都不输入，就直接跳转到/discover
  { path: '/', redirect: '/discover' },
  { 
    name: 'discover', 
    path: '/discover', 
    component: MyDiscover,
    // 这里就是写它子路由的地方
    children: [
      // 子路由的路径前面一般不加/，代表拼接父路由的路径
      // 例如这里子路由不加/代表要用 /discover/tuijian 访问，因为它要拼接父路由的路径
      // 加/就代表不要拼接父路由的路径，直接访问
      { name: 'tuijian', path: 'tuijian', component: TuiJian },
      { name: 'toplist', path: 'toplist', component: TopList },
      { name: 'playlist', path: 'playlist', component: PlayList },
    ]
  },
  { name: 'my', path: '/my', component: MyMine },
  { name: 'friend', path: '/friend', component: MyFriend },

  // *代表除了以上规则外的路径，都访问404 -- 404页面一定要放到规则的最后
  { name: 'notfound', path: '*', component: NotFound }
]

const router = new VueRouter({
  routes
})

export default router
